<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<form>
			<p>籍贯:
				<select id="sheng">
					<option value="">请选择直辖市/省</option>
				</select>
				<select id="shi">
					<option value="">请选择地级市</option>
				</select>
			</p>
			<input type="submit" value="" />
		</form>
		<script type="text/javascript">
			var shenglist = ["北京", "天津"];
			var shilist = [];
			shilist["北京"] = "海淀区|朝阳区|昌平区";
			shilist["天津"] = "和平区|河东区|河西区|南开区|北辰区";

			var str = "1,2,3,4,5,6,7";
			var arr = str.split(",");
			console.log(arr);

			var sheng = document.getElementById("sheng");
			sheng.onchange = function() {
				var shiArr = shilist[this.value].split('|');
				var shi = document.getElementById("shi");
			shi.options.length = 1;for(var i = 0; i < shiArr.length; i++) {
				var op = document.createElement("option");
					op.innerHTML = shiArr[i];
					shi.appendChild(op);
				}
			};
			console.log(shilist["北京"]);
			console.log(shilist["天津"]);

			/**

			 * 加载省的信息

			 */
			function loadSheng() {
				for(var i = 0; i < shenglist.length; i++) {
					var op = document.createElement("option");
					op.innerHTML = shenglist[i];
					sheng.appendChild(op);
				}
			}
			loadSheng();
		</script>
	</body>

</html>